<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        .search-box,
        .grade-box,
        .page-box {
            width: 1226px;
            margin: 0 auto;
            font-size: 14px;
        }

        .search-box {
            margin-top: 20px;
        }

        .grade-box table {
            width: 100%;
            border-collapse: collapse;
            line-height: 40px;
            text-align: center;
            table-layout: fixed;
        }

        .grade-box table td,
        .grade-box table th {
            border: 1px solid #333;
        }

        .grade-box input {
            width: 100%;
            box-sizing: border-box;
            text-align: center;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
        }
    </style>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .header {
            width: 1226px;
            margin: 0 auto;
            font-size: 13px;
            line-height: 50px;
        }

        .header .list {
            display: flex;
        }

        .header .list li {
            padding: 0 10px;
        }

        .site-nav-user {
            display: none;
        }

        .d-block {
            display: block;
        }

        .d-none {
            display: none;
        }

        .container {
            width: 1226px;
            margin: 0 auto;
        }

        .showGrade table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
            text-align: center;
            line-height: 40px;
        }

        .showGrade table,
        .showGrade table td,
        .showGrade table th {
            border: 1px solid #333;
        }

        .shadow {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }

        .shadow .form {
            background-color: #f6f6f6;
            width: 250px;
            padding: 20px;
        }

        .shadow .form .input-group {
            margin-bottom: 10px;
        }

        .shadow .form .input-group input {
            margin-left: 5px;
        }

        .shadow .form .input-group input:disabled {
            border: 0;
            color: #333;
        }

        /* 搜索 */

        .searchGrade {
            display: flex;
            margin-bottom: 10px;
            /* justify-content: space-between; */
        }

        .searchGrade>* {
            margin-right: 20px;
            line-height: 30px;
        }

        .searchGrade .searchBar {
            width: 300px;
            height: 29px;
            border: 1px solid #333;
            display: flex;
            overflow: hidden;
        }

        .searchGrade .searchBar .searchCon {
            border: none;
            outline: none;
            flex: 1;
            padding: 0;
            text-indent: 5px;
        }

        .searchGrade .searchBar .searchBtn {
            width: 60px;
            height: 30px;
            display: block;
            background-color: #999;
        }

        .searchGrade .orderColBar,
        .searchGrade .orderTypeBar {
            border: 1px dashed #999;
            padding: 0 20px;
        }

        .searchGrade label {
            margin-right: 10px;
        }

        .searchGrade select {
            height: 30px;
        }

        .searchGrade input[type="reset"] {
            height: 30px;
            width: 45px;
        }

        .page-box {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="search-box">
            <form class="searchGrade" @submit.prevent>
                <div class="searchBar">
                    <input type="text" class="searchCon" ref="searchCon">
                    <a href="javascript:;" class="searchBtn" @click="clickSearchHandler"></a>
                </div>
                <div class="orderColBar">
                    <!-- 排序的列名 -->
                    <label>默认<input type="radio" v-model="searchParams.col" name="col" class="orderCol"
                            value="id"></label>
                    <label>语文<input type="radio" v-model="searchParams.col" name="col" class="orderCol"
                            value="chinese"></label>
                    <label>数学<input type="radio" v-model="searchParams.col" name="col" class="orderCol"
                            value="math"></label>
                    <label>英语<input type="radio" v-model="searchParams.col" name="col" class="orderCol"
                            value="english"></label>
                    <label>总分<input type="radio" v-model="searchParams.col" name="col" class="orderCol"
                            value="total"></label>
                </div>
                <div class="orderTypeBar">
                    <!-- 排序的方式 -->
                    <label>升序<input type="radio" v-model="searchParams.type" name="type" class="orderType"
                            value="asc"></label>
                    <label>降序<input type="radio" v-model="searchParams.type" name="type" class="orderType"
                            value="desc"></label>
                </div>
                <div class="showNumSelect">
                    <select class="showNum" v-model="searchParams.size">
                        <option :value="5" selected="">每页显示5条</option>
                        <option :value="10">每页显示10条</option>
                        <option :value="15">每页显示15条</option>
                        <option :value="20">每页显示20条</option>
                    </select>
                </div>
                <input type="reset" @click="resetHandler" value="重置">
            </form>
        </div>
        <div class="grade-box">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>班级</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>英语</th>
                        <th>总分</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.class}}</td>
                        <td>
                            <span v-if="item.isEdit==false">{{item.chinese}}</span>
                            <input v-else type="number" v-model.number.lazy="item.chinese">
                        </td>
                        <td>
                            <span v-if="item.isEdit==false">{{item.math}}</span>
                            <input v-else type="number" v-model.number.lazy="item.math">
                        </td>
                        <td>
                            <span v-if="item.isEdit==false">{{item.english}}</span>
                            <input v-else type="number" v-model.number.lazy="item.english">
                        </td>
                        <td>{{item.chinese + item.math + item.english }}</td>
                        <td>
                            <!-- item.isEdit == 已经处于编辑状态(点击此按钮应该保存数据 -> 提示文本应该是保存) -->
                            <!-- {{item.isEdit}} -->
                            <a href="javascript:;" @click="editHandler(item)">{{item.isEdit?'保存':'编辑'}}</a>
                            <a href="javascript:;" @click="deleteHandler(item)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="page-box">
            <button class="prev" @click="prevHandler">上一页</button>
            <span class="page-tips">
                {{current}}/{{maxPage}}
            </span>
            <button class="prev" @click="nextHandler">下一页</button>
        </div>
    </div>
</body>

<script>

    // 全局默认配置
    axios.defaults.baseURL = ' http://121.43.116.41/demo/php/';
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    var app = new Vue({
        el: "#app",
        data: {
            list: [], // 存放查询后的数据
            total: null,
            maxPage: null,
            current: 1,
            searchParams: { // 存放搜索接口的相关参数
                wd: "",
                col: "id",
                type: "asc",
                page: 1,
                size: 10,
            }
        },
        methods: {
            searchGoodOrderLimit() {
                axios.get("/searchGradeOrderLimit.php", { params: this.searchParams }).then(response => {
                    if (response.status == 200) {
                        return response.data;
                    } else {
                        var err = new Error("Request Fail!")
                        throw err;
                    }
                }).then(res => {
                    console.log("请求成功", res);
                    this.list = res.list;
                    this.total = res.total;
                    this.maxPage = res.maxPage;
                    this.current = res.current;

                    this.list.forEach(v => {
                        // v.isEdit = false; // 新增数据 记录是否处于编辑状态 => 没有办法被Vue响应式检测 
                        this.$set(v, "isEdit", false); // 此写法可以被检测
                    })
                }).catch(err => {
                    console.log(err.message);
                })
            },
            editHandler(item) {

                if (item.isEdit == true) {  // 此时正处于编辑状态
                    axios.post("/updateGradeById.php", {
                        id: item.id,
                        ch: item.chinese,
                        mh: item.math,
                        eh: item.english
                    }).then(response => {
                        if (response.status == 200) {
                            return response.data;
                        } else {
                            var err = new Error("Request Fail!")
                            throw err;
                        }
                    }).then(res => {
                        console.log("更新成功", res);

                    }).catch(err => {
                        console.log(err.message);
                    })
                }


                item.isEdit = !item.isEdit;  // 状态切换
            },
            deleteHandler(item) {
                let id = item.id;
                axios.get("/deleteGradeById.php", { params: { id: id } }).then(response => {
                    if (response.status == 200) {
                        return response.data;
                    } else {
                        var err = new Error("Request Fail!")
                        throw err;
                    }
                }).then(res => {
                    console.log("删除成功", res);
                    var index = this.list.indexOf(item);
                    // this.list.splice(index, 1);

                    this.searchGoodOrderLimit();

                }).catch(err => {
                    console.log(err.message);
                })
            },
            clickSearchHandler() {
                this.searchParams.wd = this.$refs.searchCon.value;
            },
            prevHandler() {
                if (this.searchParams.page <= 1) {
                    alert("已经是第一页了")
                    return false;
                }
                this.searchParams.page--;
            },
            nextHandler() {
                if (this.searchParams.page > this.maxPage) {
                    alert("已经是最后一页了")
                    return false;
                }
                this.searchParams.page++;
            },
            resetHandler() {
                this.searchParams = { // 存放搜索接口的相关参数
                    wd: "",
                    col: "id",
                    type: "asc",
                    page: 1,
                    size: 10,
                }
            }
        },
        watch: {
            // 监听searchParams改变 -> 重新发生请求
            searchParams: {
                handler(newVal) {
                    console.log("查询参数改变", JSON.stringify(newVal));

                    this.searchGoodOrderLimit();
                },
                deep: true,

            }
        },
        mounted() {
            this.searchGoodOrderLimit();  // 页面加载时,默认请求所有数据
        },
    })


</script>

</html>